<template>
  <section>
    <!--工具条-->
  <!--   <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.search" placeholder="鉴赏ID"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="getUser">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col> -->

    <!--列表-->
    <template>
      <el-table  :data="expertApplyList" highlight-current-row v-loading="loading" style="margin-top:20px;text-align: center;">
        <el-table-column prop="applyId" header-align="center" label="申请ID"  width="120">
        </el-table-column>
        <el-table-column prop="userId" header-align="center" label="申请人ID" width="120" >
        </el-table-column>
        <el-table-column prop="userName" header-align="center" label="申请人姓名" width="200">
        </el-table-column>
        <el-table-column prop="applyTime" header-align="center" label="申请时间" width="200" >
        </el-table-column>
        <el-table-column prop="title" header-align="center" label="头衔" width="250" >
        </el-table-column>
        <el-table-column prop="intro" :row-style='changeCss'  header-align="center" label="自我介绍">
        </el-table-column>
        <el-table-column prop="phone" header-align="center" label="  手机号码" width="150">
        </el-table-column>
        <el-table-column header-align="center" label="操作" width="150" >
          <template scope="scope">
            <el-button size="small" @click="lookMoreInfo(scope.$index,scope.row)">查看更多信息</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
      <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="num" :total="total" style="float:right;">
      </el-pagination>
      <div class="all">总计<span class="total">{{total}}</span>条记录</div>
    </el-col>
  </section>

</template>
<script>
  import { sendDataPost } from "../../api/api";
  export default {
    data() {
      return {
        filters: {
          search: ''
        },
        loading: false,
        expertApplyList: [],
        total: 0,
        page: 1,
        num:20
      }
    },
    methods: {
      //获取所有專家申請
      getAllExpertApply: function () {
        let params=sendDataPost({url: "user/joinus/applylist",msg: {pgNo:this.page,num:this.num,order:2}})
        this.loading = true;
        let formData=JSON.stringify(params.params)
        this.$http.post(params.baseURL,formData).then(res=>{
          // console.log(res)
          if (res.body.msg.total>1) {
            sessionStorage.setItem('total',res.body.msg.total)
            this.total=JSON.parse(sessionStorage.getItem('total'))
          }
          this.expertApplyList = res.body.msg.rows
          this.loading = false;
          if (!this.loading) {
            // this.changeCss()
          }
        })
      },

      // 分页请求
      handleCurrentChange(val) {
        this.total=JSON.parse(sessionStorage.getItem('total'))
        this.page = val;
        this.getAllExpertApply();
      },

      // 查看更多信息
      lookMoreInfo(index,row){
        localStorage.setItem('EAEROW',JSON.stringify(row))
        this.$router.push({
            path:'/lookMoreExpertsApplyInfo',
            name: '查看申请专家更多信息'
        })
      },
      // 更改饿了么表单默认样式
      changeCss({ row, rowIndex}){
        console.log(row)
        console.log(rowIndex)
        return "white-space:nowrap!important"
        
        // var allElement=document.querySelectorAll('.el-table__row')
        // console.log(allElement)
      }

    },
    mounted() {
      this.getAllExpertApply()
    }
  };

</script>

<style scoped>
.el-table .cell{
  overflow: hidden!important;
text-overflow:ellipsis!important;
white-space: nowrap!important;
}
.all{
  font-size: 16px;
  line-height: 32px;
  color: #666
}
.total{
    padding:0 5px;
    color: #52BAE9;
  }
</style>